<template>
	<el-card shadow="never" class="!border-none card">
		<div style="color: var(--primary-color)" class="font-bold text-[14px] mb-[12px]">最新商品</div>
		<el-table v-loading="loading" :data="tableData">
			<el-table-column label="序号" align="center" width="50px" type="index" />
			<el-table-column label="添加时间" align="center" prop="createTime" width="90">
				<template slot-scope="scope">
					<div class="multi-one">{{ scope.row.createTime }}</div>
				</template>
			</el-table-column>
			<el-table-column label="商品名称" align="center" prop="name" min-width="100" />
			<el-table-column label="商品价格" align="center" prop="retailPrice" min-width="80">
				<template slot-scope="scope">
					{{ '￥' + scope.row.retailPrice }}
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
import dayjs from 'dayjs';

export default {
	name: 'LaterShop',
	data() {
		return {
			userId: null,
			loading: false,
			tableData: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
		};
	},
	created() {
		this.flag = this.$store.getters.roles.findIndex((item) => item == 'admin' || item == 'dev');
		if (this.flag <= -1) {
			this.userId = this.$store.getters.userId;
		}
		this.getList();
	},
	methods: {
		getList() {
			this.queryParams.userId = this.userId;
			this.loading = true;
			this.$request
				.post('/mall/goods/newGoods', this.addDateRange(this.queryParams, [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]))
				.then((res) => {
					this.tableData = res.data;
				})
				.finally(() => {
					this.loading = false;
				});
		},
	},
};
</script>

<style scoped lang="scss">
.card {
	box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.05);
	border-radius: 12px;
}
</style>
